<template>
    <el-card class="box-card" shadow="never">
        <template #header>
            <div class="detail">
                挂号详情
            </div>
        </template>
        <!-- 卡片的身体部分展示挂号详情信息 -->
        <!-- 订单详情顶部结构 -->
        <div class="top">
            <!-- 左侧标签 -->
            <el-tag class="ml-2" type="success">
                <div class="tag">
                    <svg t="1685933792381" class="icon" viewBox="0 0 1024 1024" version="1.1"
                        xmlns="http://www.w3.org/2000/svg" p-id="2389" width="16" height="16">
                        <path
                            d="M392.533333 806.4L85.333333 503.466667l59.733334-59.733334 247.466666 247.466667L866.133333 213.333333l59.733334 59.733334L392.533333 806.4z"
                            fill="#1afa29" p-id="2390"></path>
                    </svg>
                    <span>{{ orderInfo?.param.orderStatusString }}</span>
                </div>
            </el-tag>
            <!-- 右侧支付二维码及相关信息 -->
            <div class="right_info">
                <img src="../../../../assets/images/code_app.png" alt="" />
                <div class="info">
                    <p>微信关注 “北京114预约挂号”</p>
                    <p>“快速预约挂号”</p>
                </div>
            </div>
        </div>
        <!-- 订单详情底部结构 -->
        <div class="bottom">
            <div class="left">
                <!-- 左侧展示订单详情信息 -->
                <el-descriptions class="margin-top" :column="1" border>
                    <el-descriptions-item>
                        <template #label>
                            <div class="cell-item">就诊人信息</div>
                        </template>
                        {{ orderInfo?.patientName }}
                    </el-descriptions-item>
                    <el-descriptions-item>
                        <template #label>
                            <div class="cell-item">就诊日期</div>
                        </template>
                        {{ orderInfo?.reserveDate }}
                    </el-descriptions-item>
                    <el-descriptions-item>
                        <template #label>
                            <div class="cell-item">就诊医院</div>
                        </template>
                        {{ orderInfo?.hosname }}
                    </el-descriptions-item>
                    <el-descriptions-item>
                        <template #label>
                            <div class="cell-item">就诊科室</div>
                        </template>
                        {{ orderInfo?.depname }}
                    </el-descriptions-item>
                    <el-descriptions-item>
                        <template #label>
                            <div class="cell-item">医生职称</div>
                        </template>
                        {{ orderInfo?.title }}
                    </el-descriptions-item>
                    <el-descriptions-item>
                        <template #label>
                            <div class="cell-item">医事服务费</div>
                        </template>
                        <span style="color: red">{{ orderInfo?.amount }}</span>
                    </el-descriptions-item>
                    <el-descriptions-item>
                        <template #label>
                            <div class="cell-item">挂号单号</div>
                        </template>
                        {{ orderInfo?.outTradeNo }}
                    </el-descriptions-item>
                    <el-descriptions-item>
                        <template #label>
                            <div class="cell-item">挂号时间</div>
                        </template>
                        {{ orderInfo?.createTime }}
                    </el-descriptions-item>
                </el-descriptions>
                <div class="btn" v-if="orderInfo?.orderStatus == 0 || orderInfo?.orderStatus == 1">
                    <el-popconfirm title="确定取消预约吗?" @confirm="cancel">
                        <template #reference>
                            <el-button>取消预约</el-button>
                        </template>
                    </el-popconfirm>
                    <el-button type="primary" size="default" v-if="orderInfo?.orderStatus == 0"
                        @click="openDialog">支付</el-button>
                </div>
            </div>
            <div class="right">
                <el-card class="order-card" shadow="never">
                    <template #header>
                        <div class="card-header">
                            <span>注意事项</span>
                        </div>
                    </template>
                    <p>1.请确认就诊人信息是否准确，若填写错误将无法取号就诊，损失由本人承担；</p>
                    <p style="color: red">
                        2.【取号】就诊当天需在{{ orderInfo?.fetchTime.slice(0, 10) + ' ' +
                        orderInfo?.fetchTime.slice(10) }}在医院取号，未取号视为爽约，该号不退不换；
                    </p>
                    <p>
                        3.【退号】在{{ orderInfo?.quitTime }}前可在线退号 ，逾期将不可办理退号退费；
                    </p>
                    <p>
                        4.北京114预约挂号支持自费患者使用身份证预约，同时支持北京市医保患者使用北京社保卡在平台预约挂号。请于就诊当日，携带预约挂号所使用的有效身份证件到院取号；
                    </p>
                    <p>5.请注意北京市医保患者在住院期间不能使用社保卡在门诊取号。</p>
                </el-card>
            </div>
        </div>
    </el-card>
    <!-- 展示支付二维码的结构 -->
    <el-dialog v-model="showQrcode" title="微信支付" width="500px" @close="closeDialog">
        <div class="qrocde">
            <img :src="imgURL" alt="" width="250px" />
            <p>请使用微信扫一扫</p>
            <p>扫描二维码支付</p>
        </div>
        <template #footer>
            <el-button size="default" @click="closeDialog">关闭窗口</el-button>
        </template>
    </el-dialog>
</template>

<script setup lang="ts">
import { onMounted, ref } from "vue";
import { reqOrderInfo, reqCancelOrder, reqQrcode, reqQueryPayState } from "@/api/user";
import { useRoute } from "vue-router";
import type { PayResult, OrderResponseData, OrderInfo, QrCode } from "@/api/user/type";
import { ElMessage } from "element-plus";
//生成二维码插件qrcode
//@ts-ignore
import QRCode from "qrcode";

const $route = useRoute();

// 控制支付窗口显隐
const showQrcode = ref<boolean>(false);

// 记录二维码图片的地址
const imgURL = ref<string>('')
// 记录订单详情信息
const orderInfo = ref<OrderInfo>();

// 存储定时器
const timer = ref<number>()

// 唤醒支付窗口
const openDialog = async () => {
    // 获取二维码
    const res: QrCode = await reqQrcode($route.query.orderId as string)
    // 根据服务器返回信息生成二维码
    imgURL.value = await QRCode.toDataURL(res.data.codeUrl);

    showQrcode.value = true

    // 询问服务器当前这笔交易的结果
    timer.value = window.setInterval(async () => {
        // 询问服务器当前这笔交易的结果
        const res: PayResult = await reqQueryPayState($route.query.orderId as string)

        if (res.code === 200) {
            if (res.data === true) {
                // 跳转到支付成功页面
                ElMessage({
                    type: "success",
                    message: "支付成功",
                });
                // 重新获取订单信息
                getOrderInfo()
                showQrcode.value = false
                clearInterval(timer.value)
            }
        }
    }, 2000)
}

const closeDialog = () => {
    clearInterval(timer.value)
    showQrcode.value = false
}

// 获取订单详情的数据
const getOrderInfo = async () => {
    const res: OrderResponseData = await reqOrderInfo($route.query.orderId as string)

    if (res.code === 200)
        orderInfo.value = res.data
}

// 取消订单
const cancel = async () => {

    //取消预约成功
    const res = await reqCancelOrder($route.query.orderId as string);

    if (res.code === 200)
        //再次获取订单详情的数据
        getOrderInfo();
    else
        ElMessage({
            type: "error",
            message: "取消预约失败，请查看退号规则，是否已过退号时间",
        });
}

onMounted(() => {
    getOrderInfo()
})
</script>

<style scoped lang="scss">
.box-card {
    margin-left: 30px;

    .detail {
        color: #7f7f7f;
        font-weight: 900;
    }

    .top {
        display: flex;
        justify-content: space-between;
        border-bottom: 1px solid #ccc;
        padding: 0 10px 10px 10px;
        align-items: center;

        .tag {
            display: flex;
            justify-content: center;
            align-items: center;

            span {
                margin-left: 5px;
            }
        }

        .right_info {
            display: flex;
            justify-content: space-between;
            align-items: center;

            img {
                width: 40px;
                height: 40px;
            }

            .info {
                margin-left: 10px;

                p {
                    font-size: 12px;
                    line-height: 20px;
                }
            }
        }
    }

    .bottom {
        display: flex;
        margin-top: 20px;

        .left {
            flex: 4;

            .btn {
                margin: 20px 0px;
                display: flex;
                justify-content: center;
            }
        }

        .right {
            flex: 6;
            margin-left: 20px;

            p {
                line-height: 30px;
            }
        }
    }
}


.qrocde {
    border-top: 1px solid #7f7f7f;
    border-bottom: 1px solid #7f7f7f;
    display: flex;
    flex-direction: column;
    align-items: center;

    p {
        line-height: 30px;
    }
}
</style>